import Menu from 'ant-design-vue/es/menu'
import Icon from 'ant-design-vue/es/icon'
import i18n from '@/lang'
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/c/font_3954971_i1qizfurwv.js',
});
const { Item, SubMenu } = Menu

export default {
  name: 'SMenu',
  props: {
    menu: {
      type: Array,
      required: true
    },
    theme: {
      type: String,
      required: false,
      default: 'dark'
    },
    mode: {
      type: String,
      required: false,
      default: 'inline'
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    collapseOne: {
      type: Boolean,
      required: false,
      default: true
    }
  },
  data () {
    return {
      openKeys: [],
      selectedKeys: [],
      cachedOpenKeys: []
    }
  },
  computed: {
    rootSubmenuKeys: vm => {
      const keys = []
      vm.menu.forEach(item => keys.push(item.path))
      return keys
    }
  },
  created () {
    this.updateMenu()
  },
  watch: {
    collapsed (val) {
      if (val) {
        this.cachedOpenKeys = this.openKeys.concat()
        this.openKeys = []
      } else {
        this.openKeys = this.cachedOpenKeys
      }
    },
    $route () {
      this.updateMenu()
    }
  },
  methods: {
    // select menu item
    onOpenChange (openKeys) {
      // 在水平模式下时执行，并且不再执行后续
      if (this.mode === 'horizontal' || !this.collapseOne) {
        this.openKeys = openKeys
        return
      }
      // 非水平模式时
      const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key))
      if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    },
    updateMenu () {
      //空白路由不更新选中菜单
      if (this.$route.name === 'blank') {
        return;
      }
      const routes = this.$route.matched.concat()
      if (routes.length >= 4 && this.$route.meta.hidden) {
        routes.pop()
        this.selectedKeys = [routes[2].path]
      } else {
        this.selectedKeys = [routes.pop().path]
      }
      if(this.selectedKeys[0].length > 1 && this.selectedKeys[0][this.selectedKeys[0].length - 1] === '/'){
        this.selectedKeys[0] = this.selectedKeys[0].substring(0, this.selectedKeys[0].length -1);
      }

      const openKeys = []
      if (this.mode === 'inline') {
        routes.forEach(item => {
          openKeys.push(item.path)
        })
      }

      this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
    },

    // render
    renderItem (menu) {
      if (!menu.hidden) {
        return menu.children && menu.children.length > 0 && menu.children.filter(m => m.display === true).length > 0
        && !menu.hideChildrenInMenu ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
      }
      return null
    },
    renderMenuItem (menu) {
      if (menu.display === false) {
        return null;
      }
      const target = menu.meta.target || null;
      // eslint-disable-next-line no-mixed-operators
      const tag = target && 'a' || 'router-link'
      const props = { to: { name: menu.name } }
      const attrs = { href: menu.path, target: menu.meta.target }
      return (
        <Item {...{ key: menu.path }}>
          <tag {...{ props, attrs }}>
            {this.renderIcon(menu.meta.icon)}
            <span>{i18n.t(menu.meta.title)}</span>
          </tag>
        </Item>
      )
    },
    renderSubMenu (menu) {
      if (menu.display === false) {
        return null;
      }
      const itemArr = []
      if (!menu.hideChildrenInMenu) {
        menu.children.forEach(item => itemArr.push(this.renderItem(item)))
      }
      return (
        <SubMenu {...{ key: menu.path }}>
          <span slot="title">
            {this.renderIcon(menu.meta.icon)}
            <span>{i18n.t(menu.meta.title)}</span>
          </span>
          {itemArr}
        </SubMenu>
      )
    },
    renderIcon (icon) {
      if (icon === 'none' || icon === undefined) {
        return null
      }
    //   <icon-font :type="item.meta.icon" style="font-size: 2.6rem; margin-bottom: 9px" v-if="item.meta.icon.indexOf('icon') === 0"/>
    // <a-icon :type="item.meta.icon" style="font-size: 2.6rem; margin-bottom: 9px" v-else/>
      const props = {};
      typeof (icon) === 'object' ? props.component = icon : props.type = icon
      if (icon.indexOf('icon') === 0) {
        // return (
        //   <i {...{'class': 'iconfont ' + icon}}/>
        // )
        return <IconFont {... { props } } style=""/>
      }

      props.theme = 'filled'
      return (
        <Icon {... { props } }/>
      )
    }
  },
  render () {
    const { mode, theme, menu } = this
    const props = {
      mode,
      theme,
      openKeys: this.openKeys
    }
    const on = {
      select: obj => {
        this.selectedKeys = obj.selectedKeys
        this.$emit('select', obj)
      },
      openChange: this.onOpenChange
    }

    const menuTree = menu.map(item => {
      if (item.hidden) {
        return null
      }
      return this.renderItem(item)
    })
    // {...{ props, on: on }}
    return (
      <Menu vModel={this.selectedKeys} {...{ props, on }}>
        {menuTree}
      </Menu>
    )
  }
}
